<template>
  <el-dialog
    title="下载合同"
    v-model="dialogVisible"
    @close="handleClose"
    width="800px"
    class="download-dialog"
    :close-on-click-modal="false"
  >
    <!-- 第一步：选择展示字段 -->
    <div v-if="currentStep === 1" class="step-content">
      <div class="form-item">
        <label class="form-label">合同名称：</label>
        <span class="form-value">{{ contractInfo.contractName || '某某工程类合同' }}</span>
      </div>
      <div class="form-item">
        <label class="form-label required">展示字段：</label>
        <el-select
          v-model="selectedFields"
          multiple
          collapse-tags
          placeholder="请选择展示字段"
          class="field-select"
        >
          <el-option
            v-for="field in availableFields"
            :key="field.value"
            :label="field.label"
            :value="field.value"
          />
        </el-select>
      </div>
    </div>

    <!-- 第二步：下载详情页 -->
    <div v-else-if="currentStep === 2" class="step-content">
      <div class="contract-info">
        <div class="info-row">
          <span class="info-label">合同编号：</span>
          <span class="info-value">{{ contractInfo.contractNo || 'HT GCLO01 (示例)' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">合同名称：</span>
          <span class="info-value">{{ contractInfo.contractName || '自动带入' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">合同类型：</span>
          <span class="info-value">{{ contractInfo.contractType || '工程类' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">客户名称：</span>
          <span class="info-value">{{ contractInfo.clientName || '某某公司' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">物料类型：</span>
          <span class="info-value">{{ contractInfo.materialType || '物料/物料/物料' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">总金额：</span>
          <span class="info-value">{{ contractInfo.totalAmount || 'xxxxxx元' }}</span>
        </div>
      </div>

      <!-- 表格展示选择的字段 -->
      <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
        <el-table-column
          v-for="field in selectedFieldsDisplay"
          :key="field.value"
          :label="field.label"
          :prop="field.value"
        >
          <template #default="scope">
            {{ getFieldValue(scope.row, field.value) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-if="currentStep === 2" @click="handlePreviousStep" type="primary" plain>上一步</el-button>
        <el-button v-if="currentStep === 1" @click="handleNextStep" type="primary">下一步</el-button>
        <el-button v-if="currentStep === 2" @click="handleDownload" type="primary">下载</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="downContractStepForm">
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  contractData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['update:modelValue', 'close', 'download'])

// 本地响应式状态
const dialogVisible = ref(false)
const currentStep = ref(1) // 1: 第一步选择字段, 2: 第二步下载详情
const selectedFields = ref(['field1', 'field2', 'field3']) // 默认选择的字段

// 可用字段列表
const availableFields = ref([
  { label: '字段1', value: 'field1' },
  { label: '字段2', value: 'field2' },
  { label: '字段3', value: 'field3' },
  { label: '字段4', value: 'field4' },
  { label: '字段5', value: 'field5' }
])

// 合同信息
const contractInfo = reactive({
  contractNo: '',
  contractName: '',
  contractType: '',
  clientName: '',
  materialType: '',
  totalAmount: ''
})

// 模拟表格数据
const tableData = ref([
  {
    field1: '展示一条数据做示例',
    field2: '如果有相同字段分类还是要合并',
    field3: '展示超过页面格式的，产生多张生产加工单',
    field4: '示例数据4',
    field5: '示例数据5'
  },
  {
    field1: '示例数据1-2',
    field2: '示例数据2-2',
    field3: '示例数据3-2',
    field4: '示例数据4-2',
    field5: '示例数据5-2'
  },
  {
    field1: '示例数据1-3',
    field2: '示例数据2-3',
    field3: '示例数据3-3',
    field4: '示例数据4-3',
    field5: '示例数据5-3'
  }
])

// 根据选择的字段值计算要显示的字段配置
const selectedFieldsDisplay = computed(() => {
  return availableFields.value.filter(field => selectedFields.value.includes(field.value))
})

// 监听props中的modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal
    if (newVal) {
      // 当弹窗显示时，重置步骤和加载合同数据
      currentStep.value = 1
      if (props.contractData) {
        // 从contractData中加载数据
        Object.assign(contractInfo, props.contractData)
      }
    }
  },
  { immediate: true }
)

// 监听本地dialogVisible变化，通知父组件
watch(
  dialogVisible,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
  resetForm()
  emit('close')
}

// 重置表单
function resetForm() {
  currentStep.value = 1
  selectedFields.value = ['field1', 'field2', 'field3'] // 重置为默认字段
}

// 下一步
function handleNextStep() {
  if (selectedFields.value.length === 0) {
    ElMessage.warning('请至少选择一个展示字段')
    return
  }
  currentStep.value = 2
}

// 上一步
function handlePreviousStep() {
  currentStep.value = 1
}

// 下载
function handleDownload() {
  // 触发下载事件，传递必要的参数
  emit('download', {
    contractInfo: { ...contractInfo },
    selectedFields: [...selectedFields.value]
  })
  
  ElMessage.success('合同下载成功')
  // 可以选择是否在下载后关闭弹窗
  // handleClose()
}

// 获取字段值，用于表格显示
function getFieldValue(row, fieldKey) {
  return row[fieldKey] || '-'  
}
</script>

<style scoped>
/* 对话框样式 */
:deep(.download-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.download-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.download-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.download-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 步骤内容样式 */
.step-content {
  width: 100%;
}

/* 第一步表单样式 */
.form-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.form-label {
  width: 120px;
  font-weight: 500;
  color: #606266;
  text-align: left;
}

.form-label.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 4px;
}

.form-value {
  flex: 1;
  color: #303133;
}

.field-select {
  flex: 1;
  max-width: 500px;
}

/* 第二步合同信息样式 */
.contract-info {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.info-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  text-align: left;
}

.info-value {
  flex: 1;
  color: #303133;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.download-dialog) {
    width: 95% !important;
  }
  
  .form-item,
  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-label,
  .info-label {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .field-select {
    max-width: 100%;
    width: 100%;
  }
}
</style>